 import React,{ Component } from 'react'
 import {LuxuryStyle,
    LuxuryContainer,
    LuxuryBannerContainer,
    LuxuryTodayOnSale,
    LuxuryTodayHot,
    LuxuryActiveRecommend,
    LuxurySelectionActive,
    LuxuryListFlag,
    LuxuryListUl
} from './LuxuryStyle'
import './banner.css'
import Swiper from 'swiper'
import actionCreators from '../../../../store/home/actionCreator'
import Footer from '../../../../components/common/footer/Footer'
import {connect}  from 'react-redux'
import { bindActionCreators } from 'redux'
import BScroll from 'better-scroll' 
import _ from 'lodash'
import {Toast} from 'antd-mobile'
const Item=(props)=>{
    return (
            <div className="swiper-slide">
                <img src={props.img}></img>
            </div>
    )
}
const ListItem=(props)=>{
    return(
        <li>
        <a>
            <div className="list-img">
                <img src={props.image_url_set.main[320]}/>
            </div>
                <LuxuryListFlag><span>{props.discount_string}</span></LuxuryListFlag>
            <div className="list-bot">
                <div className="list-bot-left">
                    <div className="info">{props.title}</div>
                    <div className="time">
                        <span>仅剩</span>
                        <span>01天</span>
                        <span>18时</span>
                        <span>09分</span>
                    </div>
                </div>
                <div className="list-bot-right">
                    <img src={props.image_url_set.brand[320]}/>
                </div>
            </div>

        </a>

    </li>
    )
}
 class Luxury extends Component{
componentDidMount(){
    this.props.getLuxuryBanner()
    this.props.getLuxuryList()
    this.props.change_title('轻奢')
   
    
}
renderItem=()=>{
    return this.props.luxury_banner&&this.props.luxury_banner.map(item=><Item {...item} key={item.id}/>)
}
renderListItem=()=>{
return this.props.luxury_list && this.props.luxury_list.map(item=>{
 return <ListItem {...item} key={item.itemid}></ListItem>})
}
    render ( ) {
        return (
            <LuxuryStyle ref={el=>this.warp =el}>
                <LuxuryContainer>
                    <LuxuryBannerContainer>
                    <div className="swiper-container" ref={el=>this.luxurybanner =el}>
                        <div className="swiper-wrapper" >
                            {this.renderItem()} 
                        </div>
                        <div className="swiper-pagination"></div>
                    </div>
                    </LuxuryBannerContainer>
                    <LuxuryTodayOnSale>
                        <div className="title">
                            <i className="title-logo">
                                <img src="http://f0.jmstatic.com/btstatic/h5/common/icon_title.png"/>
                            </i>
                            <span>今日特惠</span>
                        </div>
                        <div className="OnSaleContent">
                            <img src="http://mp5.jmstatic.com/mobile/card_material/item_1654_2048_1024-ipad2048_1563877105.jpeg?imageView2/2/w/640/q/90"></img>
                        </div>
                    </LuxuryTodayOnSale>
                    <LuxuryTodayHot>
                    <div className="title">
                            <i className="title-logo">
                                <img src="http://f0.jmstatic.com/btstatic/h5/common/icon_title.png"/>
                            </i>
                            <span>今日热销品牌</span>
                        </div>
                        <div className="TodayHotContent">
                            <div className="TodayHotTop">
                                <img src="http://mp6.jmstatic.com/mobile/card_material/item_0_2048_1024-ipad2048_5d36d79a0e964.jpg?t=1563875226&imageView2/2/w/640/q/90"></img>
                            </div>
                            <div className="TodayHotBot">
                                <img src="http://mp5.jmstatic.com/mobile/card_material/item_0_1024_1024-ipad2048_5d36d7a0e97ef.jpg?t=1563875233&imageView2/2/w/640/q/90"></img>
                                <img src="http://mp5.jmstatic.com/mobile/card_material/item_0_1024_1024-ipad2048_5d36d7b308a83.jpg?t=1563875251&imageView2/2/w/640/q/90"></img>
                            </div>
                        </div>
                    </LuxuryTodayHot>
                    <LuxuryActiveRecommend>
                        <div className="title">
                                <i className="title-logo">
                                    <img src="http://f0.jmstatic.com/btstatic/h5/common/icon_title.png"/>
                                </i>
                                <span>活动推荐</span>
                            </div>
                            <div className="ActiveRecommendContent">
                                <img src="http://mp5.jmstatic.com/mobile/card_material/item_2835_2048_1024-ipad2048_1563861631.jpeg?imageView2/2/w/640/q/90"></img>
                            </div>
                    </LuxuryActiveRecommend>
                    <LuxurySelectionActive>
                      
                            <div className="title">
                                    <i className="title-logo">
                                        <img src="http://f0.jmstatic.com/btstatic/h5/common/icon_title.png"/>
                                    </i>
                                    <span>精选活动</span>
                            </div>
                            <LuxuryListUl>

                               {this.renderListItem()}
                            </LuxuryListUl>
                            
                      
                    </LuxurySelectionActive>
                </LuxuryContainer>
                <Footer></Footer>
            </LuxuryStyle>
           
        )
    }
    componentDidUpdate () {
        this.bscroll = new BScroll(this.warp,{click:true,mouseWheel: {
            speed: 20,
            invert: false,
            easeTime: 300
           },
       
        }) 
    }
}

 export default  connect(state=>state.home,dispatch=>bindActionCreators(actionCreators,dispatch))(Luxury)